<template>
  <div class="qqq">
    <!-- 顶部搜索框 -->
    <div class="search">
      <!-- 返回上一步 -->
      <div>
        <i class="yo-ico">&#xe680;</i>
        <input
          type="text"
          placeholder="请输入内容"
          v-model="keywords"
          @input="changevalue($event)"
          ref="getValue"
        />
      </div>
      <div @click="quxiao" v-show="show" style="color:grey;">取消</div>
      <div @click="search" v-show="!show">搜索</div>
    </div>
    <!-- 历史搜索 -->
    <div class="history" v-show="show">
      <p>历史搜索</p>
      <p>
        <!-- 删除 -->
        <span@click="del" >删除</span>
      </p>
    </div>
    <!-- 历史搜索列表 -->
    <div class="hislist">
      <span v-for="(item,index) in hislist" :key="index" v-show="show">{{item}}</span>
    </div>
    <!-- 搜索列表数据渲染 -->
    <div class="course">
      <!-- 跳转详情页 -->
      <router-link
        tag="div"
        :to="{path:'/coursedetail',query:{}}"
        v-for="(item,index) in searchList"
        :key="index"
        class="courselist"
      >
        
      </router-link>
    </div>
  </div>
</template>
<script>
// 引入api封装好的接口
// import { lessonList } from "../http/api";
import _ from "lodash";
import { Toast } from "vant";
export default {
  name: "search",
  data() {
    return {
      // 关键字
      keywords: "",
      // 数据列表
      searchList: [],
      // 显示隐藏
      show: true,
      // 搜索历史列表
      hislist: []
    };
  },
  created() {
    // 定义数组接收本地存储的历史记录
    let a = localStorage.hislist;
    if (a) {
      // 将数组转字符串
      this.hislist = JSON.parse(a);
    }
  },
  methods: {
    // input监听事件
    changevalue(e) {
      // 获取到输入框的值
      this.keywords = e.target.value;
      // 判断
      if (this.keywords.length > 0) {
        this.show = false;
      } else {
        this.show = true;
        this.searchList = [];
      }
    },
    // 删除
    del() {
      this.hislist = [];
      // 本地清除
      localStorage.clear();
      Toast.success("删除成功");
    },
    //   取消
    quxiao() {
      this.$router.back();
    },
    //   返回上一步
    back() {
      this.$router.go(-1);
    },
    //搜索  加防抖（使用lodash插件库）
    search: _.debounce(
      function() {
        //判断是否有重复
        var index = this.hislist.findIndex(ele => {
          return ele == this.keywords;
        });
        //如果有的话就删除重复
        if (index != -1) {
          this.hislist.splice(index, 1);
        }
        //向数组第一位添加
        this.hislist.unshift(this.keywords);
        //如果数组长度大于4 就删除最后一项
        if (this.hislist.length > 4) {
          this.hislist.splice(5, 1);
        }
        // 本地存储历史记录数组
        localStorage.hislist = JSON.stringify(this.hislist);
        // 请求api接口
        lessonList({
          // 传参数
          page: 1,
          limit: 10,
          keywords: this.keywords
        }).then(res => {
          // 获取到数据进行赋值
          this.searchList = res.data.data.list;
   
        });
        console.log("防抖");
      },
      3000,
      {
        leading: true, //指定在延迟开始前调用，默认false。
        trailing: false //指定在延迟结束后调用，默认true。
      }
    )
  }
};
</script>
<style lang="stylus" scoped>
.search 
  width: 100%
  height: .6rem
  line-height: .5rem
  display: flex;
  justify-content: space-between
  
  div:nth-of-type(1) 
    i 
      line-height .45rem
      font-size .2rem
      position absolute
      margin-left .28rem
      

    input 
      border: 1px solid #cccccc
      border-radius: .3rem
      width: 3rem
      height: .3rem
      text-indent: .3rem
      font-size: .2rem
      margin-left .2rem

  div:nth-of-type(2) 
    margin-right .15rem
    font-size .14rem
  
  div:nth-of-type(3) 
    margin-right: .15rem
    font-size: .14rem

.history 
  display: flex;
  justify-content: space-between;
  margin-top: .2rem
  p:nth-of-type(1) 
    font-size: .18rem
    font-weight: bold;
    margin-left: .2rem
  
  p:nth-of-type(2) 
    margin-right: 30px;
    img 
      width: 35px;

.hislist 
  span 
    display: inline-block;
    background: #f7f7f7;
    margin-left: 20px;
    padding: 10px 20px 10px 20px;
    border-radius: 20px;

.course 
  border: 1px solid #f0f2f5;
  margin-top: 0px;

  .courselist 
      width: 83%;
      margin: 0 auto;
      margin-top: 30px;
      background: white;
      border-radius: 20px;
      height: 380px;
      padding: 0px 25px;

     
    
</style>
